<template>

    <a-form-model ref="form"
                  :rules="rules"
                  :model="form"
                  layout="vertical" class="rx-a-form-vertical">
        <a-form-model-item :label="i18n('form.listFields','列表字段')" prop="formAlias" >
            <a-select :options="fields" @change="changeParamField" style="width:50%;"/>
            <a-dropdown>
                <a-button>{{i18n('list.insertVar','插入变量')}}</a-button>
                <a-menu slot="overlay">
                    <a-menu-item>
                        <a @click="appUrlParam('ctxPath')">{{i18n('list.appPath','应用程序路径')}}</a>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
         </a-form-model-item>

        <a-form-model-item  :label="i18n('list.openWith','打开方式')">
            <a-select v-model="form.linkType">
                <a-select-option value="newWindow">{{i18n('list.newWindow','新浏览器窗口')}}</a-select-option>
                <a-select-option value="openWindow">{{i18n('list.popUp','弹出窗口')}}</a-select-option>
            </a-select>
        </a-form-model-item>

        <a-form-model-item :label="i18n('list.linkAddr','链接地址')" prop="url">
            <a-input  id="textAreaUrl"    v-model="form.url"></a-input>
        </a-form-model-item>

    </a-form-model>

</template>

<script>

import linkBase from "@/views/modules/form/core/cellRender/linkBase";

/**
 * {
 *    linkType:"newWindow",
      url:""
 * }
 */
export default {
    name: "link-url-component",
    props:["layerid","destroy","config","fields"],
    mixins:[linkBase],
    data(){
        return {
            labelCol: { span:6 },
            wrapperCol: { span:18 },
            form: {
                linkType:"newWindow",
                url:""
            },
            rules: {
                url: [
                    {required: true, message: this.i18n('msa.addressNeed','链接地址必填'), trigger: 'blur'},
                ],
            }

        }
    },
    created() {
        this.init();
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        init(){
            if(this.config){
                let obj=this.parse(this.config);
                if(obj.hasOwnProperty("url")){
                    this.form=obj;
                }
            }
        },

        getData(){
            return this.form;
        },

        changeParamField(value){
            this.insert('{record.'+value +"}");
        },
        appUrlParam(value){
            this.insert('{'+value+'}')
        },
        async insert(val){
            let myField=document.getElementById("textAreaUrl");

            if(myField.selectionStart || myField.selectionStart === 0) {
                let startPos = myField.selectionStart;
                let endPos = myField.selectionEnd;
                let content= myField.value.substring(0, startPos) + val
                    + myField.value.substring(endPos, myField.value.length);
                this.form.url=content;
                await this.$nextTick() // 这句是重点, 圈起来
                myField.focus();
                myField.setSelectionRange(endPos + val.length, endPos + val.length);
            } else {
                this.form.url=val;
            }
        },
        valid(){
            return new Promise((resolve,reject)=>{
                this.$refs.form.validate(valid => {
                    if(valid){
                        resolve(true)
                    }
                    else{
                        reject(false);
                    }
                });
            })
        },

    }
}
</script>

<style scoped>

</style>